<template>
  <!-- cc-absolute -->
  <view
    class="cc-flex cc-justify-between cc-items-center "
    :style="{
      width: 'calc(100%)',
      height: height + 'px',
      marginTop: boundingTop + 'px',
      zIndex: 999,
      color: color,
      position: 'sticky'
    }"
  >
    <view class="box-width cc-flex cc-items-center ">
      <img
        class="cc-ml-14"
        style="width: 48rpx; height: 48rpx"
        src="https://ai.mojudianzisw.com/static/img/shop/ai/left.png"
        alt=""
        @click="$goBack(1)"
        v-if="color == '#232323'"
      />
      <img
        v-else
        class="cc-ml-14"
        style="width: 50rpx; height: 50rpx"
        src="https://ai.mojudianzisw.com/static/img/shop/ai/leftf.png"
        alt=""
        @click="$goBack(1)"
      />
    </view>
    <view class="box-width cc-flex cc-items-center cc-justify-center">
      <text
        style="font-size: 36rpx; font-weight: bold; color: color"
        >{{ title }}</text
      >
    </view>
    <view class="box-width"></view>
  </view>
</template>

<script>
// 
export default {
    //
    props: {
    title: {
      type: String,
      default: '默认标题', 
    },
    height: {
      type: Number,
      default: 0,
    },
    boundingTop: {
      type: Number,
      default: 0,
    },
    color: {
      type: String,
      default: '#232323',
    }
  }
};
</script>

<style scoped>
.box-width {
  width: 200rpx;
  height: 100%;
}
</style>
